<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                font-size: 50px;

                /*可以将行高设置为和高度一样的值,使单行文字在一个元素中垂直居中*/
                line-height: 200px;

                /*
                    行高(line height)
                        - 行高指的是文字占有的实际高度
                        - 可以通过line-height来设置行高
                            行高可以直接指定一个大小(px em)
                            也可以直接为行高设置一个整数
                                如果是一个整数的话,行高将会是字体的指定的倍数
                                行间距 = 行高 - 字体大小

                    字体框
                        - 字体框就是字体存在的格子,设置font-size实际上就是在设置字体框的高度

                    行高会在字体框的上下平均分配

                */

                border: 1px red solid;

                /*line-height: 1.33;*/

            }
        </style>
    </head>
    <body>
        <div>今天天气真不错 Hello hello 今天天气真不错 Hello hello 今天天气真不错 Hello hello</div>
    </body>
</html>